<template>
  <div id="app">
    <transition name="move">
      <keep-alive>
        <router-view class="view-container"></router-view>
      </keep-alive>
    </transition>
  </div>
</template>

<script>
export default {
  watch: {
    '$route'(to, from) {
      const toDepth = to.path.split('/').length
      const fromDepth = from.path.split('/').length
      // this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
      console.log(toDepth);
      console.log(fromDepth);
    }
  },
}
</script>
<style lang="stylus" scoped>
// #app
//   .view-container
//     transform: translate3d(0, 0, 0)
//     opacity: 1
//     &.move-enter
//       // transform: translate3d(100%, 0, 0)
//       opacity: 0
//     // &.move-leave-active
//     //   transform: translate3d(0, 0, 0)
//     &.move-enter-active
//       transition: all 0.3s linear
//     &.move-leave-active
//       transition: all 0.3s linear
</style>
